<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>学习一对一聊天室</title>
    <!--    一定需要引入这个包-->
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <!--semantic-ui-->
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}">
    <link th:href="@{/css/semantic.min.css}" rel="stylesheet">
    <style>
        body{
            background-image: url("/images/back_chat.jpg");
            height: 100%;
            width: 100%;
            background-size: cover;
            position: absolute;
            overflow: hidden;
        }
    </style>
</head>
<body>

<!--<div class="ui massive  card">-->
<!--	<div class="content" id="message">-->
<!-- 存放接收到的消息. -->
<!--<div id="message">-->
<!--</div>-->

<!--	</div>-->
<!--	<div class="extra content">-->
<!--		<div class="right floated author">-->
<!--			<img class="ui avatar image" src="/images/avatar/small/matt.jpg"> Matt-->
<!--		</div>-->
<!--	</div>-->
<!--</div>-->
<div class="ui container" >
    <div class="ui segment" style="height: 350px; overflow-y:scroll">
        <div class="ui comments">
            <h3 class="ui blue dividing header"><span><img class="layui-nav-img" th:src="@{'/show/'+${user.getId()}}" ></span>[[${user.getUsername()}]]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a th:href="@{'/tea/message/'+${user.getId()}}">
                    <i class="send icon" > </i>
                    留言
                </a>
            </h3>
            <div class="right comment" id="message">
                <!--<div class="ui feed">-->
                <!--	<div class="event">-->
                <!--		<div class="label">-->
                <!--&lt;!&ndash;			<img src="/images/avatar/small/elliot.jpg">&ndash;&gt;-->
                <!--		</div>-->
                <!--		<div class="content" id="message">-->
                <!--		</div>-->
                <!--	</div>-->
                <!--</div>-->
            </div>
        </div>
    </div>



    <div class="ui form">
        <div class="field">
            <textarea id="text" style="height: 50px" placeholder="输入内容（如果好友不在线，可以选择留言）"></textarea>
        </div>
    </div>

    <div class="ui action input" th:if="${session.loginuser.getUsername()!=user.getUsername()}">
        <input type="hidden" th:value="${session.loginuser.getUsername()}" id="nickname" >
        <button class="ui blue labeled submit icon button" id="connect" onclick="conectWebSocket()" >
            <i class="user icon" ></i>开始聊天
        </button>
    </div>

    <button th:if="${session.loginuser.getUsername()!=user.getUsername()}" class="ui blue labeled submit icon button " type="submit" id="isend" onclick="send()">
        <i class="send icon" > </i>
        发送
    </button>


</div>




<!--	昵称：<input type="text" id="nickname" /> -->
<!--	<button class="ui blue labeled submit icon button" onclick="conectWebSocket()">连接WebSocket</button>-->
<!--<button class="ui blue labeled submit icon button"  onclick="closeWebSocket()">断开连接</button>-->

<div class="ui action input ">
    <input type="hidden" th:value="${user.getUsername()}" placeholder="对方昵称" id="toUser">
<!--    <button class="ui icon button" >-->
<!--        <i class="add user icon"></i>-->
<!--    </button>-->
</div>

<br />



<!--<div class="ui action input">-->
<!--	<input type="text" placeholder="发送的消息" id="text" width="150px">-->
<!--</div>-->

<!--	消息：<input id="text" type="text"  />-->
<!--	对方姓名：<input id="toUser" type="text" />-->
<br>


<script>
    // <!--        每一次输入就到底部-->
    $(document).ready(function () {
        $("#isend").click(function () {
            $('html,div').animate({ scrollTop: document.getElementsByTagName('BODY')[0].scrollHeight}, 2); return true;

        });
        $("#connect").click(function () {
            $(this).hide();
        });
        //message后面要空一个
        $('.message .close').click(function () {
            $(this).closest('.message').fadeOut();
        });

    });

    $(document).click(function () {
        //message后面要空一个
        $('.message .close').click(function () {
            $(this).closest('.message').fadeOut();
        });
    });


</script>

<script type="text/javascript">

    //连接对象.
    var websocket = null;
    var nickname = null;
    function conectWebSocket(){

        nickname = document.getElementById("nickname").value;
        if(nickname == ''){
            alert("请输入昵称");
            return;
        }
        //判断当前的浏览器是否支持websocket.
        if("WebSocket" in window){
            websocket = new WebSocket("ws://127.0.0.1:8080/websocket/"+nickname);
        }else{
            alert("Not support websocket");
            return false;
        }

        //连接成功的方法.
        websocket.onopen = function(event){
            setMessgeHtml("连接成功");
        }

        //连接关闭.
        websocket.onclose = function(event){
            setMessgeHtml("Loc MSG:连接关闭");
        }

        //连接异常.
        websocket.onerror = function(event){
            setMessgeHtml("Loc MSG:连接异常");
        }


        websocket.onmessage = function(event){
            setMessgeHtml(event.data);
            console.log(event.data);
        }

        $("#connect").click(function () {
            $(this).hide();
        });

    }

    function setMessgeHtml(msg){
        var message = document.getElementById("message");
        message.innerHTML += "<div class='ui  mini compact warning message'>" +
            "" +msg   +
            "</div> <br/>";
    }

    /**
     发送消息.
     */
    function send(){
        var message = document.getElementById("text").value;
        var toUser = document.getElementById("toUser").value;
        var socketMsg = {msg:message,toUser:toUser};
        if(toUser == ''){
            socketMsg.type =0;//群聊.
        }else{
            socketMsg.type =1;//单聊.
        }

        //websocket.send(nickname+":"+message);
        websocket.send(JSON.stringify(socketMsg));//将json对象转换为json字符串.

        $("#text").val("");
    }

</script>

</body>
</html>